﻿@model IEnumerable<WebApplicationCertificateUserSystem.Models.PublicCourseModel>

<h2>@ViewBag.Title</h2>

<form action="/Courses/Search" method="post" class="form-search">
    @(Html.Kendo()
            .AutoComplete()
            .Name("searchedText")
            .DataTextField("Title")
            .MinLength(3)
            .Placeholder("Enter course name")
            .Events(ev =>
                {
                    ev.Select("selectAutoComplete");
                })
            .DataSource(data =>
            {
                data.Read(read =>
                    {
                        read.Action("GetAutocompleteData", "Courses")
                            .Data("onAdditionalData");
                    })
                    .ServerFiltering(true);
            }))

    <input type="submit" value="Search" class="btn"  />
</form>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            Lecturer Name
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
           Enrolled count
        </th>
        <th>
            Enrolled?
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LecturerName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EnrolledCount)
         </td>
        <td>
            @Html.DisplayFor(modelItem => item.Enrolled)
        </td>
        <td>
            @Html.ActionLink("Details", "Details", new { id=item.Id })
            @if (!item.Enrolled)
            {
                <span>| </span>
                @Html.ActionLink("Enroll", "Enroll", new { id = item.Id });
            }
        </td>
    </tr>
}

</table>
<script>
    $('#searchedText').addClass("input-medium search-query");
    function onAdditionalData() {
        return {
            text: $('#searchedText').val(),
        }
    }
    function selectAutoComplete(e) {
        console.log(this.dataItem(e.item.index()).Id)
    }
</script>